<template>
	<div class="index">
		<div v-loading="load.load">
			<div class="four_flex flex">
				<div class="_item">
					<h3>今日注册人数</h3>
					<div class="num flex">
						<div class="_left flex">
							<b>{{ info ? info.register.today : "-" }}</b>
							<span>人</span>
						</div>
						<div class="_right">
							<span
								:style="{ color: info.register.rate > 0 ? '#F30' : info.register.rate == 0 ? '#999' : '' }"
								v-if="info"
							>{{ info.register.rate > 0 ? '+' : '' }}{{ info.register.rate }}%</span>
							<span style="color:#999;" v-else>-</span>
							<b>相比昨日</b>
						</div>
					</div>
					<div class="curve" id="curve1"></div>
				</div>
				<div class="_item">
					<h3>今日用户付费单价</h3>
					<div class="num flex">
						<div class="_left flex">
							<b>{{ info ? info.price.today : "-" }}</b>
							<span>元</span>
						</div>
						<div class="_right">
							<span
								:style="{ color: info.price.rate > 0 ? '#F30' : info.price.rate == 0 ? '#999' : '' }"
								v-if="info"
							>{{ info.price.rate > 0 ? '+' : '' }}{{ info.price.rate }}%</span>
							<span style="color:#999;" v-else>-</span>
							<b>相比昨日</b>
						</div>
					</div>
					<div class="curve" id="curve2"></div>
				</div>
				<div class="_item">
					<h3>今日苹果销量</h3>
					<div class="num flex">
						<div class="_left flex">
							<b>{{ info ? info.apple.today : "-" }}</b>
							<span>元</span>
						</div>
						<div class="_right">
							<span
								:style="{ color: info.apple.rate > 0 ? '#F30' : info.apple.rate == 0 ? '#999' : '' }"
								v-if="info"
							>{{ info.apple.rate > 0 ? '+' : '' }}{{ info.apple.rate }}%</span>
							<span style="color:#999;" v-else>-</span>
							<b>相比昨日</b>
						</div>
					</div>
					<div class="curve" id="curve3"></div>
				</div>
				<div class="_item">
					<h3>今日安卓销量</h3>
					<div class="num flex">
						<div class="_left flex">
							<b>{{ info ? info.android.today : "-" }}</b>
							<span>元</span>
						</div>
						<div class="_right">
							<span
								:style="{ color: info.android.rate > 0 ? '#F30' : info.android.rate == 0 ? '#999' : '' }"
								v-if="info"
							>{{ info.android.rate > 0 ? '+' : '' }}{{ info.android.rate }}%</span>
							<span style="color:#999;" v-else>-</span>
							<b>相比昨日</b>
						</div>
					</div>
					<div class="curve" id="curve4"></div>
				</div>
			</div>
			<div class="one_flex div">
				<div class="HourlyStatisticsHd flex">
					<h3>
						日收入订单金额统计
						<i v-if="info">
							近{{ day_num }}天累计{{ countSum("fourteen_days_price", ["register_new", "register_old", "repurchase"]) }}元 / 
							其中当日注册新购{{ countSum("fourteen_days_price", ["register_new"]) }}元（{{ ((countSum("fourteen_days_price", ["register_new"]) / countSum("fourteen_days_price", ["register_new", "register_old", "repurchase"])) * 100).toFixed(2) }}%） / 
							非当日注册新购{{ countSum("fourteen_days_price", ["register_old"]) }}元（{{ ((countSum("fourteen_days_price", ["register_old"]) / countSum("fourteen_days_price", ["register_new", "register_old", "repurchase"])) * 100).toFixed(2) }}%） / 
							复购{{ countSum("fourteen_days_price", ["repurchase"]) }}元（{{ ((countSum("fourteen_days_price", ["repurchase"]) / countSum("fourteen_days_price", ["register_new", "register_old", "repurchase"])) * 100).toFixed(2) }}%）
						</i>
					</h3>
					<div class="right flex">
						<el-select size="small" v-model="day_num" placeholder="请选择天数" class="filter" style="margin-right: 15px;width: 120px;" @change="getData">
							<el-option label="近7天" :key="7" :value="7"></el-option>
							<el-option label="近15天" :key="15" :value="15"></el-option>
							<el-option label="近30天" :key="30" :value="30"></el-option>
						</el-select>
					</div>
				</div>
				<div class="order_echart" id="order_echart"></div>
			</div>
			<div class="one_flex div">
				<div class="HourlyStatisticsHd flex">
					<h3>
						日收入订单笔数统计
						<i v-if="info">
							近{{ day_num }}天累计{{ countSum("fourteen_days_order", ["register_new", "register_old", "repurchase"]) }}笔 / 
							其中当日注册新购{{ countSum("fourteen_days_order", ["register_new"]) }}笔（{{ ((countSum("fourteen_days_order", ["register_new"]) / countSum("fourteen_days_order", ["register_new", "register_old", "repurchase"])) * 100).toFixed(2) }}%） / 
							非当日注册新购{{ countSum("fourteen_days_order", ["register_old"]) }}笔（{{ ((countSum("fourteen_days_order", ["register_old"]) / countSum("fourteen_days_order", ["register_new", "register_old", "repurchase"])) * 100).toFixed(2) }}%） / 
							复购{{ countSum("fourteen_days_order", ["repurchase"]) }}笔（{{ ((countSum("fourteen_days_order", ["repurchase"]) / countSum("fourteen_days_order", ["register_new", "register_old", "repurchase"])) * 100).toFixed(2) }}%）
						</i>
					</h3>
					<div class="right flex">
						<el-select size="small" v-model="day_num" placeholder="请选择天数" class="filter" style="margin-right: 15px;width: 120px;" @change="getData">
							<el-option label="近7天" :key="7" :value="7"></el-option>
							<el-option label="近15天" :key="15" :value="15"></el-option>
							<el-option label="近30天" :key="30" :value="30"></el-option>
						</el-select>
					</div>
				</div>
				<div class="order_echart" id="num_echart"></div>
			</div>
		</div>
		<HourlyStatisticsEchart ref="HourlyStatisticsEchart"></HourlyStatisticsEchart>
	</div>
</template>

<script>
	import HourlyStatisticsEchart from "../../components/HourlyStatisticsEchart.vue";
	let echarts = require('echarts');
	export default {
		components: { HourlyStatisticsEchart },
		data() {
			return {
				
				// 加载动画
				load: { load: false },
				
				// 查询近x天
				day_num: 15,
				
				// 基本数据
				info: null,
				
			};
		},
		computed: {
			
			// 将最近x天的 今日新购 非今日新购 复购全部加起来
			countSum(){
				return function(key, sumKey){
					let sum = 0;
					this.info[key].map((item) => {
						sumKey.map((prop) => {
							sum += item[prop];
						});
					});
					
					if(key === "fourteen_days_price"){
						sum = sum.toFixed(2);
					}
					return sum;
				}
			},
			
		},
		methods: {

			// 获取基本数据
			getData() {
				let _this = this;
				// _this.info = {"info": {"today_register": 2,"register_rate": 200,"today_money": "0.00","money_rate": 0,"today_card": 0,"card_rate": 0,"today_vip": 0,"vip_rate": 0},"days": [{"day": "2024-02-20","week": "二"},{"day": "2024-02-21","week": "三"},{"day": "2024-02-22","week": "四"},{"day": "2024-02-23","week": "五"},{"day": "2024-02-24","week": "六"},{"day": "2024-02-25","week": "日"},{"day": "2024-02-26","week": "一"},{"day": "2024-02-27","week": "二"},{"day": "2024-02-28","week": "三"},{"day": "2024-02-29","week": "四"},{"day": "2024-03-01","week": "五"},{"day": "2024-03-02","week": "六"},{"day": "2024-03-03","week": "日"},{"day": "2024-03-04","week": "一"}],"moneys": [0,0,0,0,49,0,0,0,2.71,0,0,0,1.8,0],"nums": [0,0,0,0,1,0,0,0,4,0,0,0,2,0]};
				_this.app.ajax({
					url: "/admin/total/index",
					load: _this.load,
					data: {
						day_num: _this.day_num,
					},
					success(res) {
						_this.info = res.data;
						_this.$nextTick(() => _this.initMap());
					}
				});
			},

			// 地图初始化
			initMap() {
				let _this = this;
				
				// 顶部多个折线图
				let colorArry = [ "#5d923e", "#475bc3", "#d68b52", "#5c5c5c" ];
				let map = [];
				for (let i = 0; i < 4; i++) {
					let key = "";
					if(i === 0){
						key = "register";
					}else if(i === 1){
						key = "price";
					}else if(i === 2){
						key = "apple";
					}else if(i === 3){
						key = "android";
					}
					let option = {
						tooltip: {
							trigger: "axis",
							backgroundColor: "#FFF",
							padding: 10,
							extraCssText: "box-shadow:0 0 10px rgba(0,0,0,0.2)",
							textStyle: {
								color: "#000",
							}
						},
						grid: { top: "18%", left: "3%", right: "3%", bottom: "0%" },
						xAxis: {
							type: "category",
							boundaryGap: false,
							axisLine: { show: false },
							splitLine: { show: false },
							axisTick: {
								lineStyle: { color: "#bae0e8" },
								inside: true
							},
							axisLabel: {
								color: "#a3a3a3",
							},
							data: _this.info.seven_days
						},
						yAxis: [{
							axisLine: { show: false },
							splitLine: { lineStyle: false },
							axisTick: { show: false },
							type: "value",
							nameGap: "20",
							position: "left",
							axisLabel: {
								show: false
							}
						}],
						series: [{
							smooth: true,
							type: "line",
							symbol: false,
							lineStyle: {
								normal: {
									width: 0.5,
									color: colorArry[i]
								}
							},
							label: {
								normal: {
									show: true,
									position: "inside",
									formatter: function (params) {
										// return Number(params.value) + Number(rechangOldMoney[params.dataIndex]);
									},
									fontSize: 9,
									color: "#FFF",
									textBorderColor: "#666",
									textBorderWidth: 2,
								}
							},
							areaStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
										offset: 0,
										color: "#FFF"
									}, {
										offset: 1,
										color: colorArry[i]
									}]),
									opacity: 0.5
								}
							},
							data: _this.info[key].list
						}]
					};
					let eartch = echarts.init(document.getElementById("curve" + (i + 1)));
					eartch.setOption(option);
					map.push(eartch);
				}
				
				// 订单金额柱状图
				let rechangKitMapOption = {
					tooltip: {
						trigger: "axis",
						backgroundColor: "#FFF",
						padding: 10,
						extraCssText: "box-shadow:0 0 10px rgba(0,0,0,0.2)",
						textStyle: {
							color: "#000",
						},
						formatter: function (params, ticket, callback) {
							let html = "";
							let count = 0;
							for (let item of params) {
								count += item.value;
							}
						
							for (let item of params) {
								if (item.seriesId == "buy") {
									html += `
											<div style="font-size:13px;color:#666;">
												<span style="vertical-align:middle;margin-top:-1px;display:inline-block;margin-right:5px;border-radius:4px;width:4px;height:4px;background-color:#62daab;"></span>
												${item.seriesName}: ${item.value}（占比${count > 0 ? (item.value / count * 100).toFixed(2) : 0}%）<br />
											</div>
										`;
								}
								if (item.seriesId == "rebuy") {
									html += `
											<div style="font-size:13px;color:#666;">
												<span style="vertical-align:middle;margin-top:-1px;display:inline-block;margin-right:5px;border-radius:4px;width:4px;height:4px;background-color:#666666;"></span>
												${item.seriesName}: ${item.value}（占比${count > 0 ? (item.value / count * 100).toFixed(2) : 0}%）<br />
											</div>
										`;
								}
								if (item.seriesId == "todayBuy") {
									html += `
											<div style="font-size:13px;color:#666;">
												<span style="vertical-align:middle;margin-top:-1px;display:inline-block;margin-right:5px;border-radius:4px;width:4px;height:4px;background-color:#6395f9;"></span>
												${item.seriesName}: ${item.value}（占比${count > 0 ? (item.value / count * 100).toFixed(2) : 0}%）<br />
											</div>
										`;
								}
							}
							html += `
									<div style="font-size:13px;color:#475bc3;">
										<span style="vertical-align:middle;margin-top:-1px;display:inline-block;margin-right:5px;border-radius:4px;width:4px;height:4px;background-color:#000;"></span>
										总和: ${count.toFixed(2)}
									</div>
								`;
							return html;
						},
					},
					xAxis: {
						data: _this.info.fourteen_days,
						axisLine: {
							lineStyle: {
								color: "#FFF"
							}
						},
						axisLabel: { color: "#a3a3a3" },
						axisTick: {
							show: false,
						},
					},
					yAxis: {
						splitLine: { show: false },
						axisLine: {
							lineStyle: {
								color: "#FFF",
							}
						},
						axisLabel: {
							formatter: "{value} ",
						},
					},
					grid: {
						x: "3%",
						width: "94%",
						// y: '0%',
						top: "20%",
						bottom: "20%"
					},
					series: [
						{
							name: "老用户复购",
							id: "rebuy",
							type: "bar",
							barWidth: 10,
							stack: "one",
							data: _this.info.fourteen_days_price.map((item) => {
								return item.repurchase;
							}),
							itemStyle: {
								normal: {
									barBorderRadius: [0, 0, 7, 7],
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
										{ offset: 0, color: "#666" },
										{ offset: 1, color: "#666" }
									]),
								}
							},
							label: {
								normal: {
									show: true,
									position: "inside",
									formatter: function (params) {
										// return Number(params.value) + Number(rechangOldMoney[params.dataIndex]);
									},
									fontSize: 9,
									color: "#FFF",
									textBorderColor: "#666",
									textBorderWidth: 2,
								}
							},
						},
						{
							name: "非今日注册首单",
							id: "buy",
							type: "bar",
							stack: "one",
							barWidth: 10,
							data: _this.info.fourteen_days_price.map((item) => {
								return item.register_old;
							}),
							label: {
								normal: {
									show: true,
									position: "inside",
									formatter: function (params) {
										// return Number(params.value) + Number(rechangOldMoney[params.dataIndex]);
									},
									fontSize: 9,
									color: "#FFF",
									textBorderColor: "#666",
									textBorderWidth: 2,
								},
							},
							itemStyle: {
								normal: {
									barBorderRadius: [0, 0, 0, 0],
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
										{ offset: 0, color: "#62daab" },
										{ offset: 1, color: "#62daab" }
									])
								}
							},
						},
						{
							name: "今日注册首单",
							id: "todayBuy",
							type: "bar",
							stack: "one",
							barWidth: 10,
							data: _this.info.fourteen_days_price.map((item) => {
								return item.register_new;
							}),
							label: {
								normal: {
									show: true,
									position: "inside",
									formatter: function (params) {
										// return Number(params.value) + Number(rechangOldMoney[params.dataIndex]);
									},
									fontSize: 9,
									color: "#FFF",
									textBorderColor: "#666",
									textBorderWidth: 2,
								},
							},
							itemStyle: {
								normal: {
									barBorderRadius: [7, 7, 0, 0],
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
										{ offset: 0, color: "#6395f9" },
										{ offset: 1, color: "#6395f9" }
									])
								}
							},
						},
						{
							name: "总和",
							id: "count",
							type: "bar",
							stack: "one",
							data: Array(_this.info.fourteen_days_price.length).fill(0),
							label: {
								normal: {
									show: true,
									position: "top",
									formatter: function (params) {
										let item = _this.info.fourteen_days_price[params.dataIndex];
										return (item.register_new + item.register_old + item.repurchase).toFixed(2);
									},
									fontSize: 9,
									color: "#888",
									textBorderWidth: 2,
									fontWeight: "bold"
								},
							}
						}
					]
				};
				let rechangKitMap = echarts.init(document.getElementById("order_echart"));
				rechangKitMap.setOption(rechangKitMapOption);
				
				// 订单笔数柱状图
				let numKitMapOption = {
					tooltip: {
						trigger: "axis",
						backgroundColor: "#FFF",
						padding: 10,
						extraCssText: "box-shadow:0 0 10px rgba(0,0,0,0.2)",
						textStyle: {
							color: "#000",
						},
						formatter: function (params, ticket, callback) {
							let html = "";
							let count = 0;
							for (let item of params) {
								count += item.value;
							}
						
							for (let item of params) {
								if (item.seriesId == "buy") {
									html += `
											<div style="font-size:13px;color:#666;">
												<span style="vertical-align:middle;margin-top:-1px;display:inline-block;margin-right:5px;border-radius:4px;width:4px;height:4px;background-color:#62daab;"></span>
												${item.seriesName}: ${item.value}（占比${count > 0 ? (item.value / count * 100).toFixed(2) : 0}%）<br />
											</div>
										`;
								}
								if (item.seriesId == "rebuy") {
									html += `
											<div style="font-size:13px;color:#666;">
												<span style="vertical-align:middle;margin-top:-1px;display:inline-block;margin-right:5px;border-radius:4px;width:4px;height:4px;background-color:#666666;"></span>
												${item.seriesName}: ${item.value}（占比${count > 0 ? (item.value / count * 100).toFixed(2) : 0}%）<br />
											</div>
										`;
								}
								if (item.seriesId == "todayBuy") {
									html += `
											<div style="font-size:13px;color:#666;">
												<span style="vertical-align:middle;margin-top:-1px;display:inline-block;margin-right:5px;border-radius:4px;width:4px;height:4px;background-color:#6395f9;"></span>
												${item.seriesName}: ${item.value}（占比${count > 0 ? (item.value / count * 100).toFixed(2) : 0}%）<br />
											</div>
										`;
								}
							}
							html += `
									<div style="font-size:13px;color:#475bc3;">
										<span style="vertical-align:middle;margin-top:-1px;display:inline-block;margin-right:5px;border-radius:4px;width:4px;height:4px;background-color:#000;"></span>
										总和: ${count.toFixed(2)}
									</div>
								`;
							return html;
						},
					},
					xAxis: {
						data: _this.info.fourteen_days,
						axisLine: {
							lineStyle: {
								color: "#FFF"
							}
						},
						axisLabel: {
							color: "#a3a3a3"
						},
						axisTick: {
							show: false,
						},
					},
					yAxis: {
						splitLine: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: "#FFF",
							}
						},
						axisLabel: {
							formatter: "{value}",
						},
					},
					grid: {
						x: "3%",
						width: "94%",
						// y: '0%',
						top: "20%",
						bottom: "20%"
					},
					series: [
						{
							name: "老用户复购",
							id: "rebuy",
							type: "bar",
							barWidth: 10,
							stack: "one",
							data: _this.info.fourteen_days_order.map((item) => {
								return item.repurchase;
							}),
							itemStyle: {
								normal: {
									barBorderRadius: [0, 0, 7, 7],
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
										{ offset: 0, color: "#666" },
										{ offset: 1, color: "#666" }
									]),
								}
							},
							label: {
								normal: {
									show: true,
									position: "inside",
									formatter: function (params) {
										// return Number(params.value) + Number(rechangOldMoney[params.dataIndex]);
									},
									fontSize: 9,
									color: "#FFF",
									textBorderColor: "#666",
									textBorderWidth: 2,
								}
							},
						},
						{
							name: "非今日注册首单",
							id: "buy",
							type: "bar",
							stack: "one",
							barWidth: 10,
							data: _this.info.fourteen_days_order.map((item) => {
								return item.register_old;
							}),
							label: {
								normal: {
									show: true,
									position: "inside",
									formatter: function (params) {
										// return Number(params.value) + Number(_this.info.fourteen_days_order[params.dataIndex]);
									},
									fontSize: 9,
									color: "#FFF",
									textBorderColor: "#666",
									textBorderWidth: 2,
								},
							},
							itemStyle: {
								normal: {
									barBorderRadius: [0, 0, 0, 0],
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
										{ offset: 0, color: "#70b13e" },
										{ offset: 1, color: "#70b13e" }
									])
								}
							},
						},
						{
							name: "今日注册首单",
							id: "todayBuy",
							type: "bar",
							stack: "one",
							barWidth: 10,
							data: _this.info.fourteen_days_order.map((item) => {
								return item.register_new;
							}),
							label: {
								normal: {
									show: true,
									position: "inside",
									formatter: function (params) {
										// return Number(params.value) + Number(_this.info.fourteen_days_order[params.dataIndex]);
									},
									fontSize: 9,
									color: "#FFF",
									textBorderColor: "#666",
									textBorderWidth: 2,
								},
							},
							itemStyle: {
								normal: {
									barBorderRadius: [7, 7, 0, 0],
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
										{ offset: 0, color: "#c9c861" },
										{ offset: 1, color: "#c9c861" }
									])
								}
							},
						},
						{
							name: "总和",
							id: "count",
							type: "bar",
							stack: "one",
							data: Array(_this.info.fourteen_days_order.length).fill(0),
							label: {
								normal: {
									show: true,
									position: "top",
									formatter: function (params) {
										let item = _this.info.fourteen_days_order[params.dataIndex];
										return (item.register_new + item.register_old + item.repurchase);
									},
									fontSize: 9,
									color: "#888",
									textBorderWidth: 2,
									fontWeight: "bold"
								},
							}
						}
					]
				};
				let numKitMap = echarts.init(document.getElementById("num_echart"));
				numKitMap.setOption(numKitMapOption);
				
				window.onresize = function() {
					for (let i = 0; i < 4; i++) {
						map[i].resize();
					}
					rechangKitMap.resize();
					numKitMap.resize();
					_this.$refs["HourlyStatisticsEchart"].resize();
				};
			},

		},
		mounted() {
			this.getData();
		}
	}
</script>

<style lang="scss" scoped>
	.index{
		background:#F9F9F9;
		border-radius: 16px;
		overflow: hidden;
		.div {
			background: #fff;
			border-radius: 12px;
		}
		.four_flex {
			flex-direction: row;
			flex-wrap: wrap;
			overflow: hidden;
			._item {
				width: calc((100% - 60px) / 4);
				margin-bottom: 20px;
				background: #FFF;
				margin-right: 20px;
				border-radius: 16px;
				overflow: hidden;
				// border:1px solid #ececec;
				&:nth-child(4n) {
					margin-right: 0;
				}
				h3 {
					padding: 25px 28px 0 28px;
					color: #7e7e9b;
					font-size: 15px;
					font-weight: normal;
					line-height: 25px;
				}
				.num {
					padding: 0 32px;
					margin-top: 10px;
					flex-direction: row;
					justify-content: space-between;
					._left {
						flex-direction: row;
						align-items: center;
						b {
							color: #000;
							font-size: 26px;
						}
						span {
							color: #7e7e9b;
							margin-left: 15px;
						}
					}
					._right {
						text-align: right;
						span {
							font-size: 16px;
							display: block;
							line-height: 20px;
							color: $background;
						}
						b {
							font-weight: normal;
							font-size: 12px;
							color: #7e7e9b;
							display: block;
							line-height: 20px;
							margin-top: 2px;
						}
					}
				}
				.curve {
					height: 100px;
					margin-top: 10px;
				}
			}
		}
		.one_flex {
			margin-bottom: 20px;
			h3 {
				padding: 0;
				i {
					font-size: 12px;
					margin-left: 20px;
				}
			}
			.HourlyStatisticsHd {
				flex-direction: row;
				justify-content: space-between;
				// align-items: center;
				padding: 16px 16px 0;
				.right {
					flex-direction: row;
					align-items: center;
					padding-top: 5px 5px 0 0;
					.radio {
						margin-right: 40px;
					}
					.timeEc {
						width: 150px;
					}
				}
			}
			h3 {
				padding: 16px 0 0 16px;
				color: #7e7e9b;
				font-size: 15px;
				font-weight: normal;
				line-height: 25px;
			}
			.order_echart {
				height: 260px;
			}
		}
	}
</style>